<template>
  <div class="title_wrap">
    <div class="title_wrapper">
      <div class="prefer_wrapper">
        <Icon :type="icon" :color="color" />
        <div class="prefer">{{ title }}</div>
      </div>
      <div class="modify">{{ subtitle }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: "default"
    },
    icon: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    subtitle: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="stylus" scoped>
.title_wrap {
  padding: 10px 5px;
  box-shadow: 0 3px 8px rgba(192, 192, 192, 0.5);
  border-radius 5px
}

.title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;

  .prefer_wrapper {
    display: flex;
    align-items: center;

    .prefer {
      margin-left: 3px;
    }
  }

  .modify {
    font-size: 14px;
  }
}
</style>
